 <template>
 	<view>
 		<view class="header" :style="{height: statusBarHeight + 'px'}">
 			<i class="iconfont icon-shuye"></i>
 			<i class="iconfont icon-shuye c"></i>
 		</view>
 		<view class="main">
 			<view class="userBox" v-if="hasLogin">
 				<image mode="aspectFill" :src="userInfo.icon" class="avatar"></image>
 				<view class="userInfo">
 					<view class="username">{{userInfo.username}}</view>
 					<view class="fanscount">{{userInfo.honor||''}}</view>
 				</view>
 			</view>
 			<view class="userBox" v-else @click="goLogin">
 				<image mode="aspectFill" :src="defautAvatar" class="avatar"></image>
 				<view class="userInfo">
 					<view class="username">点击登录</view>
 					<view class="fanscount">登录享更多服务！</view>
 				</view>
 			</view>
			
 			<view class="dataMain">
 				<view class="dataList">
 					 <z-paging ref="paging" refresher-only @onRefresh="onPulling" use-page-scroll>
 							<view class="item" v-for="(item,index) in listx" :key="index">
 								<view class="item-title">{{item.title}}</view>
 							</view>
 						</z-paging>
 				</view>
 			</view>
 		</view>
 	</view>
 </template>

 <script>
 	import {
 		mapState,
 		mapMutations
 	} from 'vuex'
 	import {
 		myProfile
 	} from '@/components/kevinrong-http/user.js'
 	export default {
 		data() {
 			return {
 				listx: [],
 				triggered: false,
 				statusBarHeight: 0,
 				defautAvatar: '/static/imgs/noavatar.gif'
 			}
 		},
 		mounted() {
 			this.GetStatusBarHeight()
 			const data = []
 			for (let i = 0; i < 100; i++) {
 				data.push({
 					title: `Item ${i}`,
 				})
 			}
 			this.listx = data
			this.getProfile()
 		},
 		computed: {
 			...mapState(['hasLogin', 'userInfo']),
 		},
 		methods: {
			getProfile(){
				myProfile().then(r=>{
					
				})
			},
 			onPulling() {
 				console.log()
 			},
 			GetStatusBarHeight() {
 				const SystemInfo = wx.getSystemInfoSync();
 				this.statusBarHeight = SystemInfo.statusBarHeight + 130;
 			},
 			goLogin() {
 				uni.navigateTo({
 					url: '/pages/user/login'
 				})
 			},
 			login() {
 				uni.navigateTo({
 					url: '/pages/user/login'
 				})
 			}
 		},

 	}
 </script>

 <style lang="scss" scoped>
 	.content {
 		height: 400rpx;
 		overflow: hidden;
 	}

 	.header {
 		background-image: linear-gradient(#ff685b, $baseColor);
 		position: relative;
 		overflow: hidden;

 		.icon-shuye {
 			position: absolute;
 			font-size: 190rpx;
 			color: #f35349;
 			bottom: -70rpx;
 			left: 90rpx;

 			&.c {
 				left: 400rpx !important;
 				font-size: 260rpx;
 			}
 		}
 	}

 	.main {
 		position: relative;
 		top: -20px;
 		background-color: #fff;
 		border-top-left-radius: 40rpx;
 		border-top-right-radius: 40rpx;
 		min-height: calc(100vh - 350rpx);
		

 		.avatar {
 			width: 120rpx;
 			height: 120rpx;
 			position: absolute;
 			top: -60rpx;
 			left: 40rpx;
 			border-radius: 20rpx;
 		}

 		.userInfo {
 			padding: 90rpx 0 40rpx 40rpx;
 			border-bottom: 1px solid #eee;

 			.username {
 				font-size: 36rpx;
 				font-weight: bold;
 				color: $h2FontColor;
 			}

 			.fanscount {
 				margin-top: 10rpx;
 				color: #97989f;
 				font-size: 25rpx;

 				span {
 					margin-right: 15rpx
 				}
 			}
 		}

 		.dataMain {
 			padding: 0 40rpx;
 		}
 	}
 </style>